<template>
  <!-- <with-bg-image :bg-image="image" class="h-full"> -->
  <with-bg-image class="h-full">
    <div class="return" v-if="isHeader">
      <router-link to="home">
        <img src="@/assets/返回.png" alt="">
      </router-link>
    </div>
    <div :key="key" class="h-full">
      <!-- <router-view v-slot="{ Component }" style="height: calc(100vh - 10rem)"> -->
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </div>
  </with-bg-image>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, provide, watch, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "./store";
import bgImage from "./assets/bg.png";
// import headingImage from "./assets/heading.png";
import loginBgImage from "./assets/login_bg.png";
import WithBgImage from "./components/layout/WithBgImage.vue";
// import bottomImage from "./assets/bottom.png";
import { menus } from "./router";
// import AnimateGif from "./assets/animate.gif";

export default defineComponent({
  name: "App",
  components: {
    WithBgImage,
  },
  setup() {
    const key = ref(0);
    const route = useRoute();
    const store = useStore();

    const isHeader = ref(true)
    // console.log(route);

    provide("key", key);

    // 判断是否登录
    // const logined = computed(() => {
    //   // return (store.state as any).session.user != null
    //   return route.name != "Login";
    // });

    watch(
      () => route.name,
      async (name: any) => {
        console.log('route name', name)
        if (name == 'Home' || name == 'Rains') {
          isHeader.value = false
        } else {
          isHeader.value = true
        }
        // 通知ue变化
        ; (window as any).ue4('routeChanged', name)
        store.commit("session/setBgImage", {
          // image: logined.value ? "" : loginBgImage,
          // image: logined.value ? bgImage : loginBgImage,
        });
      }
    );

    return {
      key,
      tabs: menus,
      isHeader
    };
  },
});
</script>

<style>
/* @media (min-width: 3800px) {
  .rightSideBar { 
    width: 22% !important;
  }
} */
.return {
  position: absolute;
  top: 2vh;
  left: 2vw;
  width: 3vw;
  height: 2vh;
  cursor: pointer;
}

.return:hover {
  transform: scale(1.1);
}

.bottom_bgc {
  /* background-image: url('~@/assets/bottom.png'); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 81px;
  position: fixed;
  bottom: 0;
  z-index: 999;
}

.bottom_bgc_img {
  width: 56%;
  height: 45px;
  margin: 18px auto;
}
</style>